<template>
	<view>
		<view class="hbg" style="background-color: #DFDBB6;">
			<view class="head">
				<view class="pic">
					<u--image width="130rpx" height="130rpx" src="/static/weizhi.png" shape="circle"></u--image>
				</view>
				<view class="username">
					<view style="line-height: 30px;font-weight: 500;"  @tap="login" v-show="showlogin1">{{username}}</view>
					<view style="line-height: 30px;font-weight: 500;"  v-show="showlogin2">{{username}}</view>
					<view style="line-height: 30px;font-weight: 500;"  >{{userphone}}</view>
				</view>
				
				<view class="role" @click="selecttype">
					<u--text color="#fff" size="26rpx" suffixIcon="reload"
						iconStyle="font-size: 16px;color:#fff;margin-left:8rpx" text="汽车充电"></u--text>
				</view>
				<view class="clear"></view>
			</view>
			<view class="mid">
				<navigator @click="gotocdz"><text>{{memberinfo.cdstatus}}</text>充电中</navigator>
				<navigator @click='gotojf'><text>0</text>积分</navigator>
				<navigator @click='gotoquan'><text>0</text>优惠券</navigator>
				<navigator @click="gowallet"><text>{{money}}</text>余额</navigator>
			</view>
		</view>
		<view class="content">
			<view class="title">常用功能</view>
			<view class="info">
				<u-cell-group :border="false">
					<u-cell @click="myorder" size="large" icon="order" :border="false" title="我的订单"
						:isLink="true"></u-cell>
					<u-cell url="" size="large" icon="coupon" :border="false" title="我的卡券" :isLink="true"></u-cell>
					<u-cell @click="gotosc" size="large" icon="star" :border="false" title="收藏电站"
						:isLink="true"></u-cell>
					<u-cell @click="wxkefu" size="large" icon="kefu-ermai" :border="false" title="客服中心"
						:isLink="true"></u-cell>
					<u-cell url="" size="large" icon="lock" :border="false" title="隐私协议" :isLink="true"></u-cell>
					<u-cell @click="logout" size="large" icon="backspace" :border="false" title="退出登录"
						:isLink="true"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 登陆组件 -->
		<com-login ref="login" @myevent="uinfo"></com-login>
		<com-tabbar :currentTab="currentTab"></com-tabbar>
	</view>
</template>

<script>
	let that
	import {
		mapState,
		mapActions
	} from 'vuex'
	
	export default {
		data() {
			return {
				currentTab: 'user',
				username: '立即登陆',
				userphone:'',
				showlogin1: true,
				showlogin2: false,
				money: '0.00',
				memberinfo:[],//用户信息
			}
		},
		onShow() {
			// #ifndef MP-WEIXIN
			uni.hideTabBar()
			// #endif
			this.getmemberinfo()
			let userInfo =  this.userInfo
			if (userInfo.id != '' && userInfo.id != undefined) {
				this.username = userInfo.user_name
				this.userphone = userInfo.user_tel
				this.showlogin1 = false
				this.showlogin2 = true
				this.money = userInfo.card_yu_e
			}else{
				this.showlogin1 = true
				this.showlogin2 = false
				this.money = '0.00'
				this.username = '立即登陆'
			}
		},
		mounted() {
			that = this
		},
		computed: {
			//引入store全局变量
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			...mapActions(['userLoginAction', 'userLogoutAction']),
			login() {
				this.$refs.login.openLogin()
			},
			//获取当前用户信息
			getmemberinfo(){
				this.$http_api.user_info({
					uid: this.userInfo.id
				}).then((res)=>{
					that.memberinfo = res
					this.username = res.user_name
					this.userphone = res.user_tel
				})
			},
			gowallet() {
				uni.switchTab({
					url: '/pages/wallet/wallet'
				})
			},
			//跳转订单详情
			gotocdz() {
				//判断登陆状态
				if (!this.loginState) {
					this.$refs.login.openLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/order/order-detail'
				})
			},
			//跳转收藏列表
			gotosc(){
				//判断登陆状态
				if (!this.loginState) {
					this.$refs.login.openLogin()
					return
				}
				uni.navigateTo({
					url:'/pages/order/order-collect'
				})
			},
			//跳转订单列表
			myorder(){
				//判断登陆状态
				if (!this.loginState) {
					this.$refs.login.openLogin()
					return
				}
				uni.navigateTo({
					url:'/pages/order/order'
				})
			},
			gotojf() {
				this.$u.toast('暂未开放积分功能')
				return
			},
			gotoquan() {
				this.$u.toast('暂未开放优惠券功能')
				return
			},
			selecttype(){
				this.$u.toast('暂未开放电动汽车功能')
				return
			},
			//在线微信客服
			wxkefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/...' //客服地址链接
					},
					corpId: '企业ID', //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			//退出登陆
			logout() {
				uni.showModal({
					title: '退出登陆',
					content: '请确认是否要退出登陆',
					success: function(res) {
						if (res.confirm) {
							that.userLogoutAction()
							that.$u.toast('退出成功')
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}, 2000)
						}
					}
				})

			},
			//子组件给父组件传值
			uinfo(e) {
				this.getmemberinfo()
				this.username = e.username
				this.money = e.money
				if (e.id != '') {
					this.showlogin1 = false
					this.showlogin2 = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
		background: #F5F5F5;
		padding-top: 60rpx;

		.title {
			font-size: 35rpx;
			font-weight: bold;
			padding-left: 15rpx;
			border-left: 2px solid #23BF61;
			line-height: 30rpx;
			margin-bottom: 40rpx;
		}

		.info {
			background: #fff;
			padding-top: 20rpx;
			border-radius: 20rpx;
		}
	}
	
	.username {
		float: left;
		margin-top: 20rpx;
		margin-left: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #444;
		border: 0;
		background: unset;
	}

	.hbg {

		padding: 0 3%;
		box-sizing: border-box;
		background-size: cover;
		padding-bottom: 40rpx;
		box-shadow: 0px 0px 10px #ccc;

		.head {
			padding-top: 60rpx;

			.pic {
				float: left;
			}

			.nickname {
				float: left;
				margin-top: 40rpx;
				margin-left: 10rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #444;
				border: 0;
				background: unset;
			}

			.nickname::after {
				border: 0;
			}

			.role {
				float: right;
				margin-top: 40rpx;
				background-color: #111734;
				padding: 10rpx 20rpx;
				border-radius: 40rpx;
			}
		}

		.mid {
			display: flex;
			justify-content: space-between;
			margin-top: 100rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			navigator {
				font-size: 30rpx;
				color: #666;

				text {
					font-weight: bold;
					display: block;
					font-size: 38rpx;
					color: #000;
					text-align: center;
				}
			}
		}
	}
</style>